<template>
    <div>
        <!-- 数据展示表格 -->
        <el-table
            :data="examples.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            stripe
            border
            style="width:50%;"
        >
            <el-table-column
                type="index"
                label="序号"
                width="100px"
                align="center"
            ></el-table-column>
            <el-table-column
                prop="content"
                label="案例"
                align="center"
            ></el-table-column>
            <el-table-column
                width="150px"
                align="center"
            >
                <template
                    slot="header"
                    slot-scope="scope"
                >
                    <el-button
                        type="success"
                        @click="exampleVisible=true"
                    >新增</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.row.id)"
                    >编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row.id)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页栏 -->
        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :total="examples.length"
            :page-size="pageSize"
            :page-sizes="[5,10]"
            :current-page="currentPage"
            @current-change="changeCurrent"
            @size-change="changeSize"
        ></el-pagination>
        <!-- 新增案例编辑窗口 -->
        <el-dialog
            title="新增案例"
            :visible.sync="exampleVisible"
        >
            <div style="margin-bottom: 20px;">
                <label>名称：</label>
                <el-input
                    type="text"
                    v-model="content"
                ></el-input>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="insert"
                >提交</el-button>
                <el-button @click="exampleVisible = false">关闭</el-button>
            </span>
        </el-dialog>
        <!-- 修改案例编辑窗口 -->
        <el-dialog
            title="修改案例"
            :visible.sync="successVisible"
        >
            <div style="margin-bottom: 20px;">
                <label>名称：</label>
                <el-input
                    type="text"
                    v-model="currentExample.content"
                ></el-input>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="update"
                >提交</el-button>
                <el-button @click="successVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            examples: [],
            currentPage: 1,
            pageSize: 10,
            exampleVisible: false,
            successVisible: false,
            content: "",
            currentExample: {}
        };
    },
    methods: {
        getExamples() {
            this.$http("/successExample/getAll").then(response => {
                this.examples = response.data;
            });
        },
        insert() {
            var example = {};
            example["content"] = this.content;
            this.$http({
                url: "/successExample/insert",
                method: "post",
                headers: {
                    "Content-Type":
                        "application/x-www-form-urlencoded; charset=UTF-8"
                },
                params: example
            })
                .then(response => {
                    this.$message({
                        message: response.data.message,
                        type: "success"
                    });
                    this.getExamples();
                    this.exampleVisible = false;
                    this.content = "";
                })
                .catch(err => err);
        },
        update() {
            this.$http({
                url: "/successExample/update",
                method: "post",
                headers: {
                    "Content-Type":
                        "application/x-www-form-urlencoded; charset=UTF-8"
                },
                params: this.currentExample
            })
                .then(response => {
                    this.$message({
                        message: response.data.message,
                        type: "success"
                    });
                    this.getExamples();
                    this.successVisible = false;
                })
                .catch(err => err);
        },
        // 根据id编辑动态
        handleEdit(id) {
            this.successVisible = true;
            this.$http("/successExample/getExampleById?id=" + id).then(
                response => {
                    this.currentExample = response.data;
                }
            );
        },
        // 根据ID删除动态
        handleDelete(id) {
            this.$confirm("确认删除？删除后不可恢复！", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$http("/successExample/delete?id=" + id)
                        .then(response => {
                            this.$message({
                                type: "success",
                                message: response.data.message
                            });
                            this.getExamples();
                        })
                        .catch(err => err);
                })
                .catch(() => {});
        },
        // 改变当前的页码
        changeCurrent(currentPage) {
            this.currentPage = currentPage;
        },
        // 改变当前的显示条数
        changeSize(pageSize) {
            this.pageSize = pageSize;
        }
    },
    mounted() {
        this.getExamples();
    }
};
</script>

<style>
</style>